<template>
  <div class="main-wrapper">
    <header>
      <div>
        <el-button @click="viewJson">查看数据结构</el-button>
        <el-button @click="generatePage">生成页面</el-button>
        <el-button @click="clearAll">清空</el-button>
      </div>
    </header>

    <div class="main">
      <draggable
        class="drag-box"
        element="el-row"
        :list="list"
        :group="{ name: 'people' }"
        style="width: 100%"
        handle=".drag-handle"
      >
        <nestedDraggable v-for="item in list" :key="item.id" :schema="item" />
      </draggable>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" fullscreen>
      <JsonViewer
        :value="jsonData"
        :expand-depth="1"
        :show-array-index="false"
        copyable
        boxed
      />
    </el-dialog>
  </div>
</template>

<script>
import { cloneDeep } from "lodash-es";
import JsonViewer from "vue-json-viewer";
import draggable from "@/components/vuedraggable/vuedraggable";
import nestedDraggable from "./nested";
import PubSub from "pubsub-js";
import { isArray } from "is-type-data";
import CircularJSON from "circular-json";

export default {
  components: {
    draggable,
    nestedDraggable,
    JsonViewer,
  },
  props: ["setSelectSchema"],
  provide() {
    return {
      main: this,
    };
  },
  data() {
    return {
      list: [],
      jsonData: "",
      dialogVisible: false,
      selectSchema: null,
    };
  },
  methods: {
    added(newIndex, element) {
      console.log(newIndex, element);
    },
    viewJson() {
      this.jsonData = this.list;
      this.dialogVisible = true;
    },
    delete(id) {
      const list = this.list;

      this.de(id, list);
    },
    de(id, list) {
      console.log(id);
      let index = list.findIndex((item) => item.id === id);
      if (~index) {
        console.log(index);
        list.splice(index, 1);
      } else {
        for (let index = 0; index < list.length; index++) {
          let children = list[index].children;
          if (list[index].type === "container") {
            children = list[index].children;
          }
          if (children) {
            this.de(id, children);
          }
        }
      }
    },
    copy(schema) {
      const list = this.list;
      this.co(schema, list);
    },
    co(schema, list, container) {
      const { id } = schema;
      let index = list.findIndex((item) => item.id === id);
      if (~index) {
        let id = +new Date();
        let tem = cloneDeep(schema);
        tem.props.value = "";
        tem.id = id;
        if (isArray(tem.children)) {
          tem.children.forEach((item) => {
            item.id = id++;
          });
        }
        list.push(tem);
      } else {
        for (let index = 0; index < list.length; index++) {
          container = list[index];
          let children = list[index].children;
          if (children) {
            this.co(schema, children, container);
          }
        }
      }
    },

    handleSelectSchema(schema) {
      this.selectSchema = schema;
      this.setSelectSchema(this.selectSchema);
    },

    putModel(name) {
      for (let index = 0; index < this.list.length; index++) {
        const element = this.list[index];
        this.loopModel(element, name);
      }
    },
    loopModel(element, name) {
      if (element.tag === "aegle-form") {
        element.props.model[name] = null;
      } else {
        if (element.children && element.children.length) {
          this.loopModel(element, name);
        }
      }
    },

    generatePage() {
      localStorage.setItem("low-code", CircularJSON.stringify(this.list));
      this.$router.push("/pageviewer");
    },
    clearAll() {
      this.list = [];
      localStorage.removeItem("low-code");
    },
  },
  watch: {
    list: {
      handler(val) {},
      deep: true,
    },
  },
  created() {
    PubSub.subscribe("updateModel", (name) => {
      this.putModel(name);
    });

    const lowCode = localStorage.getItem("low-code");
    this.list = lowCode ? CircularJSON.parse(lowCode) : [];
    console.log(11);
  },
};
</script>

<style lang="scss" scoped>
.main {
  height: 500px;
}

.main {
  border: 1px solid;
  padding: 30px;
}
.drag-box {
  height: 100%;
}
</style>
<style lang="scss">
.jv-container .jv-code.boxed {
  max-height: unset;
}
.jv-container .jv-code {
  overflow: unset;
}
</style>
